<template>
    <div class="progress-bar stripes animated reverse slower">
        <span class="progress-bar-inner" :style="{ width: props.width + '%', background: props.width > 50 ? '#5cb85c' : '#d9534f' }"></span>
    </div>
</template>
<script setup lang="ts">
const props = defineProps({
    width:{
        type:Number,
        default:0
    }
})
</script>
<style>
.progress-bar-container {
    display: inline-block;
}

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

@keyframes auto-progress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.progress-bar {
    background-color: #1a1a1a;
    display: inline-block;
    height: 1rem;
    width: 7rem;
    border-radius: 0.25rem;
}

.stripes {
    background-size: 1.5rem 1.5rem;
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, .15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .15) 50%,
            rgba(255, 255, 255, .15) 75%,
            transparent 75%,
            transparent);
}

.stripes.animated {
    animation: animate-stripes 0.6s linear infinite;
}

.stripes.animated.slower {
    animation-duration: 5s;
}

.stripes.reverse {
    animation-direction: reverse;
}

.progress-bar-inner {
    display: block;
    height: 100%;
    width: 0%;
    background: #34c2e3;
    border-radius: 0.15rem;
    position: relative;
}
</style>